
<template>
    <!-- 点击用户头像时触发显示页面，“我的订单”菜单项显示内容 -->
    <div id="user-center-myOrder-contrainer">
         <el-row id="user-center-myOrder-contrainer-header">
            <span>
                我的订单
            </span>
        </el-row>
        <el-divider/>
        <el-row id="user-center-myOrder-contrainer-main" v-for="(articleBrief,index) in articleBriefs" :key="index">
            <el-dialog title="订单评价" :visible.sync="dialogFormVisible">
                <el-form :model="buyComment">
                    
                    <el-form-item label="评价" :label-width="formLabelWidth">
                        <el-input v-model="buyComment.content" autocomplete="off" type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="满意度">
                        <el-rate style="line-height:52px"
                        v-model="buyComment.value"
                        show-text>
                    </el-rate>

                    </el-form-item>
                    
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="setBuyComment(articleBrief.aid,articleBrief.uid)">确 定</el-button>
                </div>
            </el-dialog>
            <el-col :lg="8"><el-image :src="articleBrief.picUrl"/></el-col>
            <el-col :lg="15">
                <div id="user-center-myOrder-contrainer-main-title">
                    <span><strong style="display: block;height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{articleBrief.title}}</strong></span>
                </div>
                <div id="user-center-myOrder-contrainer-main-content">
                    <div>
                        <span>作者：</span>
                        &nbsp;
                        <span>{{articleBrief.person}}</span>
                    </div>
                    <div>
                        <span>发表时间：</span>
                        &nbsp;
                        <span>{{articleBrief.publishTime}}</span>
                    </div>
                    <div>
                        <span>价格：</span>
                        &nbsp;
                        <span>
                            ￥{{articleBrief.price}}
                        </span>
                    </div>
                    <div>
                        <span>
                            <el-button size="small" @click="open()" >评价</el-button>
                            <el-button size="small" type="info" plain @click="removeDataById(articleBrief.orderId)">删除订单</el-button>
                        </span>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-pagination
        layout="prev, pager, next"
        :current-page="page"
        :page-size="limit"
        :total="total"
        @current-change="getPageList"
        ></el-pagination>
    </div>
</template>
<script>
import { queryOrderList,delOrder,setComment } from "@/api/article/MyOrder";
export default {
    name: 'MyOrder',
    data() {
        return {
            dialogFormVisible:false,
            buyComment:{},
            articleBriefs: {},
            formLabelWidth: "60px",
            page: 1, //当前页
            limit: 5, //每页记录数
            total: 0, //总记录数
        }
    },
    created() {
        this.getPageList();
    },
    methods: {
        setBuyComment(aid,uid){
            this.buyComment.cid=uid;
            this.buyComment.aid=aid;
            setComment(this.buyComment).then(response=>{
                this.dialogFormVisible=false;
            })


        },
        open(){
            this.dialogFormVisible=true;
        },
        getPageList(page = 1) {
            this.page = page;
            queryOrderList(this.page, this.limit).then((response) => {
                this.articleBriefs = response.data.data.records;
                this.total = response.data.data.total;
            });
        },
        removeDataById(id) {
            delOrder(id).then((response) => {
                this.$message({
                type: "success",
                message: "删除成功!",
                });
                this.getPageList();
            });
        },
    }, 
}
</script>
<style>
    #user-center-myOrder-contrainer-main .el-image {
        width: 100%;
        height: 160px;
    }
    #user-center-myOrder-contrainer-main {
        margin: 2% auto;
        width: 90%;
        height: 160px;
        -webkit-box-shadow:0px 3px 3px #c8c8c8;
        -moz-box-shadow:0px 3px 3px #c8c8c8;
        box-shadow:0px 3px 3px #c8c8c8;
    }
    #user-center-myOrder-contrainer-main-title, #user-center-myOrder-contrainer-main-content {
        margin-left: 3%;
    }
    #user-center-myOrder-contrainer-main-title, #user-center-myOrder-contrainer-main-content > div {
        margin-top: 1%;
    }
    #user-center-myOrder-contrainer-header {
        font-size: 22px;
        height: 32px;
        line-height: 32px;
    }
    #user-center-myOrder-contrainer-main-title {
        font-size: 24px;
        cursor: pointer;
    }
    #user-center-myOrder-contrainer-main-content > div > span:first-child {
        color: #909399;
    }
    #user-center-myOrder-contrainer-main-content > div:nth-last-child(2) > span:last-child {
        font-size: 20px;
        color: rgb(255, 72, 0);
    }
</style>